<template>
  <div class="gi_table_page">
    <GiTable
      title="门店评价"
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #toolbar-left>
        <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['cakerun:feedback:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
    </GiTable>
  </div>
</template>

<script setup lang="ts">
import type { TableInstance } from '@arco-design/web-vue'
import { type FeedbackQuery, exportFeedback, listFeedback } from '@/apis/cakerun/feedback'
import { useDownload, useTable } from '@/hooks'
import { listAllBrand} from '@/apis/cakerun/brandAccount'
import type { ColumnItem} from '@/components/GiForm'
import {listAllShop} from "@/apis/cakerun/shopInfo";

defineOptions({ name: 'Feedback' })

const queryForm = reactive<FeedbackQuery>({
  sort: ['id,desc'],
})

const brandInfo = ref<any[]>([])
const shopInfos = ref<any[]>([])
const getBrandInfos = () => {
  listAllBrand({ enable: true }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.brand, value: item.id })
    })
    brandInfo.value = items
  })
}
const getShops = () => {
  listAllShop({ enable: true, accountId: queryForm.accountId }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.poiName, value: item.id })
    })
    shopInfos.value = items
  })
}
getBrandInfos()
const queryFormColumns: ColumnItem[] = reactive([
  {
    type: 'select',
    label: '品牌',
    field: 'accountId',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      options: brandInfo,
      placeholder: '请选择品牌',
      multiple: true,
      onChange: (value) => {
        getShops()
      },
    },
  },
  {
    type: 'select',
    label: '门店',
    field: 'shopId',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      options: shopInfos,
      placeholder: '请选择门店',
      multiple: true,
    },
  },
  {
    type: 'range-picker',
    label: '业务时间',
    field: 'businessTime',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      showTime: false,
      format: 'YYYY-MM-DD',
    },
  },
])

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listFeedback({ ...queryForm, ...page }), { immediate: true })
const columns: TableInstance['columns'] = [
  { title: '品牌', dataIndex: 'accountName', slotName: 'accountName' },
  { title: '门店', dataIndex: 'shopName', slotName: 'shopName' },
  { title: '评分', dataIndex: 'avgScore', slotName: 'avgScore' },
  { title: '总评价', dataIndex: 'totalCount', slotName: 'totalCount' },
  { title: '差评数量', dataIndex: 'badCount', slotName: 'badCount' },
  { title: '好评数量', dataIndex: 'goodCount', slotName: 'goodCount' },
  { title: '修改时间', dataIndex: 'updateTime', slotName: 'updateTime' },
]

// 重置
const reset = () => {
  search()
}
// 导出
const onExport = () => {
  useDownload(() => exportFeedback(queryForm))
}
</script>

<style scoped lang="scss"></style>
